/* Importing fonts */
@import url("https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,400;0,900;1,700&display=swap");

/* Variables */
:root {
  --font-family: "Vollkorn",serif ;
  --normal-font: 400;
  --bold-font: 700;
  --bolder-font: 900;
  --bg-color: rgb(0, 0, 0);
  --bg-color-2: rgb(128, 128, 128);
  --primary-color: rgb(192, 192, 192);
  --secondary-color: rgb(255, 0, 0);
  --text-color: rgb(255, 255, 255);
  --primary-shadow: rgb(139, 142, 175);
  --secondary-shadow: rgb(161, 122, 105);
  --bottom-margin: 0.5rem;
  --bottom-margin-2: 1rem;
  --line-height: 1.7rem;
  --transition: 0.3s;
}
/* Variables end */


html {
  scroll-behavior: smooth;
}


/* CSS Resets */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

ul {
   list-style-type: none;
}


a {
   text-decoration: none;
   color: var(--primary-color);
}

a:hover {
   color: var(--secondary-color);
}


body {
    font-family: var(--font-family);
}

nav {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 3.5rem;
    background-color: var(--bg-color);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);

}

nav h1 {
    color: var(--primary-color);
}

nav a {
    color: var(--primary-color);
    transition : var(--transition);
}

nav a:hover {
     color: var(--secondary-color);
     border-bottom: 2px solid var(--secondary-color);
}

nav ul {
   display: flex;
   gap: 1.9rem;
}

nav ul li {
   font-weight: var(--bold-font);
}

.burger-menu {
    color: var(--primary-color);
    font-size: 2rem;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    display: none;
}

/* Clients section */
.clients {
   padding: 32px 0;
}

.clients-container {
   display: flex;
   align-items: center;
   justify-content: center;
}

.clients-title {
   text-align: center;
   margin-bottom: 1rem;
}

.cs-pic {
   width: 100%;
   height: 95%;
   padding: 0.4rem;
}


/* Footer */
footer {
   position: fixed;
   background-color: var(--bg-color);
   padding: 1.25rem;
   left: 0px;
   bottom: 0px;
   width: 100%;
   text-align: center;
   margin: 2rem 0 0;

}

@media screen and (max-width: 720px) {
   nav {
        padding: auto;
   }
   nav ul {
         position: fixed;
         background-color: var(--bg-color);
         flex-direction: column;
         top: 50px;
         left: 10%;
         width: 80%;
         text-align: center;
         transform: translateX(120%);
         transition: transform 0.5s ease-in;
   }
   nav ul li {
         margin: 8px;
      
   }
   .burger-menu {
         display: block;
   }
   nav ul.show {
         transition: translateX(0);
   }
}

@media screen and (max-width: 420px) {
   .clients-container{
      width: 17.875rem;
}
   .cs-pic {
         width: 80%;
   }
}